<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>序列化</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                // 在js中,可以获取到每一个元素的值
                // 但是获取的时候,都是一个个的获取的
                // console.log($("input[name='username']").val());
                // 序列化操作可以使得用户能够直接获取指定表单中所有带有name属性的元素的值
                // 其返回的值的格式为:key=value&key=value&key=value...
                // key表示的是name属性的值,value表示的是表单元素的服务器值
                console.log($("#userForm").serialize());
            });
        });
    </script>
</head>
<body>
<form action="#" id="userForm">
    用户名:<input type="text" name="username"><br>
    密码:<input type="password" name="password"><br>
    电话:<input type="text" name="phone"><br>
    地址:<input type="text" name="address"><br>
    <input type="submit" value="提交">
    <input type="button" value="按钮" id="btn">
</form>
</body>
</html>